<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>相册管理页面</title>

    <!--bootstrap-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="js/bootstrap/jquery.min.js"></script>
    <script src="js/bootstrap/popper.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>

    <!--引入axios框架-->
    <script src="/js/vue/axios.min.js"></script>
    <!--引入Vue框架-->
    <script src="/js/vue/vue.js"></script>
    <link rel="stylesheet" href="css/eui.css">
    <script src="js/vue/eui.js"></script>
</head>
<body>

    <div class="container" id="main">
        <h2>相册列表</h2>
        <hr>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">批量编辑</button>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">添加相册</button>
        <br>
        <table class="table">
            <thead>
            <tr>
                <th>相册名称</th>
                <th>相册简介</th>
                <th>浏览量</th>
                <th>拍摄地点</th>
                <th>相册可见范围</th>

                <th>操作</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="t in arr">
                    <td>相册名称{{t.albumTitle}}</td>
                    <td>相册简介{{t.albumDesc}}</td>
                    <td>浏览量{{t.viewsOfPhoto}}</td>
                    <td>拍摄地点{{t.albumLocation}}</td>
                    <td v-if="t.status === 1">相册可见范围公开</td>
                    <td v-if="t.status === 2">相册可见范围私密</td>

                    <td>
                        <button  data-toggle="modal" data-target="#modifyModal" @click="re_info(t.id)"  class="btn btn-success btn-sm">相册编辑</button>
                        <button  @click="delAlbum(t.id)" class="btn btn-warning btn-sm">删除相册</button>
                        <form class="radio-inline">
                            <label class="radio-inline"><input type="radio" name="optradio">相册公开</label>
                            <label class="radio-inline"><input type="radio" name="optradio">相册私密</label>
                        </form>

                    </td>
                </tr>

            </tbody>
        </table>



        <!-- 相册批量编辑模态框（Modal） -->
        <div class="modal fade" id="">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">



                </div>
            </div>
        </div>

        <!-- 相册编辑模态框（Modal） -->
        <div class="modal fade" id="modifyModal">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">编辑相册</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="modAlbumTitle">相册名称:</label>
                            <input type="text" v-model="modAlbumTitle" class="form-control" name="modAlbumTitle"
                                   placeholder="输入名称" id="modAlbumTitle">
                        </div>
                        <div class="form-group">
                            <label for="modAlbumLocation">拍摄地点:</label>
                            <input type="text" v-model="modAlbumLocation" class="form-control" name="modAlbumLocation" placeholder="输入拍摄地点"
                                   id="modAlbumLocation">
                        </div>
                        <div class="form-group">
                            <label for="modAlbumDesc">相册简介:</label>
                            <input type="text" v-model="modAlbumDesc" class="form-control" name="modAlbumDesc" placeholder="输入拍摄地点"
                                   id="modAlbumDesc">
                        </div>

                        <div class="row" style="width: 100%;height: 300px">
                            <div class="col-sm-1 col-md-1" style="width: 50px;height: 50px">
                                <a href="#" class="thumbnail">
                                    <img src="img/bird.jpg" height="40px" width="40px"/>
                                </a>
                            </div>
                            <div class="col-sm-1 col-md-1" style="width: 50px;height: 50px">
                                <a href="#" class="thumbnail">
                                    <img src="img/bird.jpg" height="40px" width="40px"/>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @click="addAlbum()">提交</button>
                    </div>

                </div>
            </div>
        </div>

        <!-- 添加相册模态框（Modal） -->
        <div class="modal fade" id="addModal">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">编辑相册</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="a_albumTitle">相册名称:</label>
                            <input type="text" v-model="a_albumTitle" class="form-control" name="a_albumTitle" placeholder="输入名称" id="a_albumTitle">
                        </div>
                        <div class="form-group">
                            <label for="a_albumLocation">拍摄地点:</label>
                            <input type="text" v-model="a_albumLocation" class="form-control" name="a_albumLocation" placeholder="输入拍摄地点" id="a_albumLocation">
                        </div>
                        <div class="form-group">
                            <label for="a_albumDesc">相册简介:</label>
                            <input type="text" v-model="a_albumDesc" class="form-control" name="a_albumDesc" placeholder="输入相册简介" id="a_albumDesc">
                        </div>
                        <div class="form-group">
                            <label for="a_albumDesc">相册封面:</label>
                            <el-form>
                                <el-form-item>
                                    <el-upload
                                            action="https://jsonplaceholder.typicode.com/posts/"
                                            list-type="picture-card"
                                            :on-preview="handlePictureCardPreview"
                                            :on-remove="handleRemove">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                </el-form-item>
                            </el-form>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </div>

                        <div class="row" style="width: 100%;height: 300px">
                            <div class="col-sm-1 col-md-1" style="width: 50px;height: 50px">
                                <a href="#" class="thumbnail">
                                    <img src="img/bird.jpg" height="40px" width="40px"/>
                                </a>
                            </div>
                            <div class="col-sm-1 col-md-1" style="width: 50px;height: 50px">
                                <a href="#" class="thumbnail">
                                    <img src="img/bird.jpg" height="40px" width="40px"/>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @click="addAlbum()">提交</button>
                    </div>

                </div>
            </div>
        </div>

        <!-- 删除相册确认框（Modal） -->
        <div class="modal fade" id="delModal">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">删除相册</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <div class="form-group">
                            <span>确认删除这个相册吗？</span>
                            <input type="hidden" v-model="a_albumTitle" class="form-control" name="a_albumTitle" placeholder="输入名称">
                        </div>

                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @click="addAlbum()">提交</button>
                    </div>

                </div>
            </div>
        </div>

    </div>







    <script>
        let v = new Vue({
            el: "#main",

            data: {
                arr: [],
                pageInfo: {},
                pageNum: 1,
                pageSize: 10,
                mId: null,

                albumLocation: null,    //拍摄地点
                albumTitle: null,       //相册名称
                albumDesc: null,        //简介
                modAlbumDesc: null,

                //编辑时相册信息
                modAlbumTitle: null,
                modAlbumLocation: null,
                modAlbumIntroduction: null,

                //添加时相册信息
                a_albumTitle: null,
                a_albumLocation: null,
                a_albumDesc: null,
                a_albumCover:null,

                selectAll: false,
                checkedIds: [],

                dialogImageUrl: '',
                dialogVisible: false
            },
            methods:{
                //设备列表
                loadAlbum: function (pageNum) {
                    //发请求到后台获取商品信息
                    let num;
                    if (!pageNum) {
                        num = this.pageNum;
                    } else {
                        num = pageNum;
                        this.pageNum = pageNum;
                    }
                    let form = new FormData(document.querySelector("form"));
                    console.log(form.toString());
                    let size = this.pageSize;
                    axios.post("/wemedia/DdAlbum/list/" + num + "/" + size, form)
                        .then(function (response) {
                            console.log("成功加载数据");
                            v.arr = response.data.data.list;
                            v.pageInfo = response.data.data;
                        })
                },

                //删除相册
                delAlbum: function (id) {
                    axios.delete("/wemedia/DdAlbum/delete/" + id).then(function (response) {
                        v.loadAlbum(this.pageNum);
                    })
                },

                //添加相册
                addAlbum: function () {
                    let data = new Object();
                    data.title = v.a_albumTitle;
                    data.pubLocation = v.a_albumLocation;
                    data.desc = v.a_albumDesc;
                    axios.post("/wemedia/ddAlbum/addAlbum", data)
                        .then(function (response) {
                            console.log("插入数据");
                            v.loadAlbum(this.pageNum);
                        })
                },

                //相册信息的反显
                re_info: function (id) {
                    axios.get("/wemedia/DdAlbum/" + id)
                        .then(function (response) {
                            console.log("相册的反显");
                            v.mId = response.data.data.id;
                            //相册修改时，反显之前的拍摄地点
                            v.modAlbumLocation = response.data.data.location;
                            //相册修改时，反显之前的相册名称
                            v.modAlbumTitle = response.data.data.albumTitle;
                            //相册修改时，反显之前的相册简介
                            v.modAlbumDesc = response.data.data.albumDesc;
                        });
                },

                handleRemove(file, fileList) {
                    console.log(file, fileList);
                },
                handlePictureCardPreview(file) {
                    this.dialogImageUrl = file.url;
                    this.dialogVisible = true;
                }

            },
        })
    </script>





</body>
</html>